<template>
	<view>
		<view class="pl30 pr30 pt35 pb20">
			<view class="bg-f h162 flex row-around col-center radius16 mb20">
				<view class="flex row-column col-center">
					<text class="color-y7 fs46 fw-700">{{count}}</text>
					<view class="mt10 color6 fs26">团队人数</view>
				</view>
				<view class="flex row-column col-center">
					<text class="color-y7 fs46 fw-700">{{sum_bonus}}</text>
					<view class="mt10 color6 fs26">累计分红</view>
				</view>
			</view>
			<view class="bg-f h162 flex row-around col-center radius16 mb20">
				<view class="flex row-column col-center">
					<text class="color-y7 fs46 fw-700">{{zhitui_price}}</text>
					<view class="mt10 color6 fs26">直推奖</view>
				</view>
				<view class="flex row-column col-center">
					<text class="color-y7 fs46 fw-700">{{jiantui_price}}</text>
					<view class="mt10 color6 fs26">间推奖</view>
				</view>
			</view>
			<view class="bg-f h162 flex row-around col-center radius16 mb20">
				<view class="flex row-column col-center">
					<text class="color-y7 fs46 fw-700">{{zhituiNum}}</text>
					<view class="mt10 color6 fs26">直推金卡人数</view>
				</view>
				<view class="flex row-column col-center">
					<text class="color-y7 fs46 fw-700">{{jiantuiNum}}</text>
					<view class="mt10 color6 fs26">间推金卡人数</view>
				</view>
			</view>
			

			<view class="bg-f h80 pl30 mt20 radius20  flex col-center">
				<u-icon name="search" size="24" color="#999999" class="mr24"></u-icon>
				<u-input v-model="query.name" placeholder='输入会员昵称或手机号搜索' confirm-type='搜索' @confirm='searchBtn' />
			</view>
		</view>
		<view class=" bg-f radius16">
			<view class="color9 fs24 flex row-between padding30">
				<block v-for="(item,i) in list" :key='i'>
					<view :class="['text-center',active==item.id? 'active' : '']" @click="select(item)">
						<text>{{item.name}}</text>
						<view class="">({{item.num}})</view>
					</view>
				</block>
			</view>
			<view class="h2" style="background: #F5F5F5;"></view>
			<u-empty text="暂无数据" mode="list" v-if='teamList.length<1' class='mt100'></u-empty>
			<block v-for="(item,i) in teamList" :key='i' v-else>
				<view class="mr30 ml30 flex pb20 u-border-bottom mt20">
					<image :src="item.avatar" class="w80 h80 radius80 mr10"></image>
					<view class="flex1 fs26 flex row-between">
						<view class="flex row-column row-between ">
							<view class="fw-500 flex">
								<view class="u-line-1" style="max-width: 160rpx;">{{item.name}}</view>
								<text>({{item.status_status_text==1? '直推' : '间推'}})</text>
							</view>
							<text class="color9 fs24">{{item.mobile}}</text>
						</view>
						<view class="flex row-column row-between col-center">
							<text class="fw-500">直推奖</text>
							<text class="color9 fs24 color-y7 fw-700">{{item.zhitui_price}}</text>
						</view>
						<view class="flex row-column row-between col-center">
							<text class="fw-500">间推奖</text>
							<text class="color9 fs24 color-y7 fw-700">{{item.jiantui_price}}</text>
						</view>
						<view class="flex row-column row-between col-center">
							<text class="fw-500">累计分红</text>
							<text class="color9 fs24 color-y7 fw-700">{{item.bonus}}</text>
						</view>
						<!-- <view class="flex row-between">
							<text class="fw-500">{{item.name}}</text>
							<text class="color9 fs24">累计分红</text>
						</view>
						<view class="flex row-between">
							<text class="color9 fs24">{{item.mobile}}</text>
							<text class="color-y7 fw-700">{{item.bonus}}</text>
						</view> -->
					</view>
				</view>
			</block>
		</view>
	</view>
</template>

<script>
	export default {
		onLoad(opt) {
			this.active = opt.id
			this.query.id = opt.id
			this.getteam()
			this.getteam_list()
		},
		data() {
			return {
				list: [],
				teamList: [],
				active: '',
				query: {
					page: 1,
					size: 20,
					name: '',
					id: ''
				},
				//团队人数
				count: '',
				//累计分红
				sum_bonus: '',
				//直推奖
				zhitui_price:uni.getStorageSync('userInfo').zhitui_price,
				//间推奖
				jiantui_price:uni.getStorageSync('userInfo').jiantui_price,
				//直推金卡人数
				zhituiNum:'',
				jiantuiNum:''
			};
		},
		methods: {
			//获取团队人数
			getteam() {
				this.$api.team().then(res => {
					this.list = res.data
				})
			},
			//选项卡
			select(item) {
				this.active = item.id
				this.query.id = item.id
				this.query.page = 1
				this.getteam_list()
			},
			//搜索
			searchBtn() {
				this.query.page = 1
				this.getteam_list()
			},
			//获取团队列表
			getteam_list(cd) {
				this.$api.team_list(this.query).then(res => {
					this.count = res.data.count
					this.sum_bonus = res.data.sum_bonus
					this.zhituiNum=res.data.level
					this.jiantuiNum=res.data.level1
					cd ? this.teamList = [...this.teamList, ...res.data.data] : this.teamList = res.data.data
				})
			}

		},
		onReachBottom() {
			if (this.count > this.teamList.length) {
				this.query.page++
				this.getteam_list('cd')
			} else {
				this.$msg('暂无更多数据')
			}

		}
	}
</script>

<style lang="scss">
	.active {
		font-size: 24rpx;
		font-weight: 500;
		color: #FF6B35;
		position: relative;
	}

	.active ::after {
		content: ' ';
		width: 40rpx;
		height: 10rpx;
		background: #FF6B35;
		border-radius: 5rpx;
		position: absolute;
		bottom: -20rpx;
		left: 50%;
		transform: translateX(-50%);
	}
</style>
